<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2021-11-25 11:18:33
 * @LastEditors: zzb
 * @LastEditTime: 2023-02-06 09:55:45
-->
<template>
  <div class='mywork_two'>
    <el-table :data="tableData" border>
      <el-table-column prop="siteName" label="站点" align="center" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="channelName" label="所属栏目" align="center" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="header" label="文章标题" align="center">
        <template slot-scope="scope">
          <el-link @click="goArticle(scope.row)">{{scope.row.header}}</el-link>
        </template>
      </el-table-column>

      <el-table-column prop="createdDate" label="创建日期" width="200" align="center">
      </el-table-column>
      <el-table-column prop="tgMessage" label="退稿原因" width="300" align="center" show-overflow-tooltip>

      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="handleEditor( scope.row)" type="text" icon="el-icon-edit" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
//栏目接口调用,栏目删除调用
import { getBackInfoList, articleViewUrl } from "@/api/content/mywork";
//---------------------------
import { refreshRouteArr } from "@/settings.js";
export default {
  props: {
    articleStatusOption: {},
  },
  data() {
    return {
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getList();
    document.addEventListener("visibilitychange", this.Fnrefresh);
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.Fnrefresh);
  },

  methods: {
    Fnrefresh() {
      let route = this.$route.path;
      if (!document.hidden) {
        if (refreshRouteArr.includes(route)) {
          this.getList();
        }
      }
    },
    //读取回收站栏目信息
    getList() {
      getBackInfoList(this.queryParams).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.totalCount;
      });
    },
    //生成文章访问连接
    goArticle(row) {
      articleViewUrl({
        articleId: row.articleId,
      }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },

    //编辑信息
    handleEditor(row) {
      let { href } = this.$router.resolve({
        path: "/article/addarticle",
        query: {
          articleId: row.articleId || null,
          channelId: row.channelId,
          workflowId: row.workflowId,
          workflowStatuId: row.workflowStatuId || null,
          siteId: row?.siteId || null,
          siteAlias: row?.siteAlias || null,
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang='scss'>
</style>